<template>
	<div class="left-table-container">
		<!--fixed header-->
		<div v-if="hasFixed" class="left-tab-fixed-box">
			<div class="left-tab-fixed-header">
				<div v-for="(item) in tableHeader" :key="item.key" :style="{height: `${cellHeight}px`}">
					<div v-if="item.fixed" :style="setCellStyle(item)" class="left-tab-cell-item" style="border-right: solid 1px #dcdee2;">
						<div v-if="item.key === 'operation'">
							<span class="check-item" style="font-size: 12px;" @click="onClearCheck">{{ isAll ? '取消' : '全选' }}</span>
						</div>
						<div v-else>{{ item.name }}</div>
					</div>
				</div>
			</div>
			<!--fixed table body-->
			<div ref="leftTableFixed" class="left-tab-fixed-body" :style="{height: `${height - cellHeight - 12}px`}" @scroll="onLeftTableBodyFixedScroll">
				<div
					v-for="(item, index) in tableData"
					:key="index"
					:class="index === hoverIdx ? 'left-tab-fixed-body-row hover-style' : 'left-tab-fixed-body-row'"
					:style="{background: setCheckStyle(item)}"
					@mouseover="onMouseOver(index)"
					@mouseleave="onMouseLeave(index)"
				>
					<div
						v-for="(headedItem, headerIndex) in tableHeader"
						:key="headerIndex"
						class="left-tab-body-cell-box"
						:style="{height: `${cellHeight}px`}"
					>
						<div v-if="headedItem.fixed" :style="setCellStyle(headedItem)" class="left-tab-body-cell">
							<div v-if="headedItem.key === 'operation'">
								<span class="check-item el-icon-s-flag" :style="{ color: checkArr.includes(item.id) ? '#2d8cf0' : '#808695' }" @click="onCheckRow(item)"></span>
							</div>
							<div v-else>{{ item[headedItem.key] }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--table header-->
		<div ref="leftTableHeader" class="left-tab-header">
			<div v-for="(item) in tableHeader" :key="item.key" :style="{height: `${cellHeight}px`}">
				<div v-if="item.key === 'operation'" :style="setCellStyle(item)" class="left-tab-cell-item">
					<span class="check-item" style="font-size: 12px;" @click="onClearCheck">{{ isAll ? '取消' : '全选' }}</span>
				</div>
				<div v-else :style="setCellStyle(item)" class="left-tab-cell-item">{{ item.name }}</div>
			</div>
			<div class="cell-gutter" :style="{height: `${cellHeight}px`}"></div>
		</div>
		<!--table body-->
		<div ref="leftTableBody" :style="{height: `${height - cellHeight - 4}px`}" class="left-table-body" @scroll="onLeftTableBodyScroll">
			<el-checkbox-group v-model="selectedArr" @change="onCheckboxChange">
				<div
					v-for="(item, index) in tableData"
					:key="index"
					class="left-tab-body-cell-box"
					:style="{height: `${cellHeight}px`}"
					@mouseover="onMouseOver(index)"
					@mouseleave="onMouseLeave(index)"
				>
					<div
						v-for="(headerItem, headerIndex) in tableHeader"
						:key="headerIndex"
						style="height: 100%;"
						:class="index === hoverIdx ? 'hover-style' : ''"
						:style="{background: setCheckStyle(item)}"
					>
						<div v-if="headerItem.type === 'checkbox'" class="left-tab-body-cell" :style="setCellStyle(headerItem)">
							<el-checkbox :label="item.id" :disabled="item.checked">{{ '' }}</el-checkbox>
						</div>
						<div v-else-if="headerItem.key === 'operation'" class="left-tab-body-cell" :style="setCellStyle(headerItem)">
							<span class="check-item el-icon-s-flag" :style="{ color: checkArr.includes(item.id) ? '#2d8cf0' : '#808695' }" @click="onCheckRow(item)"></span>
						</div>
						<div v-else class="left-tab-body-cell" :style="setCellStyle(headerItem)">{{ item[headerItem.key] }}</div>
					</div>
				</div>
			</el-checkbox-group>

		</div>
	</div>
</template>
<script>
    import leftRightMix from './left-right-mix';
    import { debounce } from '../../../../utils/jk/jk-tool';
    export default {
        mixins: [leftRightMix],
        props: {
            checkArr: {
                type: Array,
                default() {
                    return [];
                }
            },
            tableData: {
                type: Array,
                default() {
                    return [];
                }
            },
            scrollTop: {
                type: Number,
                default: 0
            },
            scrollLeft: {
                type: Number,
                default: 0
            },
            height: {
                type: Number,
                default: 0
            },
            hoverIndex: {
                type: Number,
                default: null
            },
            tableOption: {
                type: Object,
                default() {
                    return {
                        tableHeader: [],
                        dateFrom: '',
                        dateTo: '',
                        rowList: [],
                        startDateKeyName: '', // 进度开始时间
                        endDateKeyName: '' // 进度结束的时间
                    };
                }
            }
        },
        data() {
            return {
                selectedArr: [],
                checked: [],
                hasFixed: false,
                tableHeader: [],
                hoverIdx: null,
                isAll: false
            };
        },
        methods: {
            onCheckboxChange() {
                this.returnCheckedData();
            },
            returnCheckedData() {
                const arr = [];
                this.selectedArr.forEach(x => {
                    this.tableData.forEach(k => {
                        if (x === k.id) {
                            arr.push(k);
                        }
                    });
                });
                this.$emit('on-check-change', arr);
            },
            onClearCheck() {
                const ids = [...this.selectedArr, ...this.tableData.filter(x => x.checked)];
                if (ids.length === this.tableData.length) {
                    this.selectedArr = [];
                    this.isAll = false;
                } else {
                    this.selectedArr = [];
                    this.tableData.filter(x => {
                        if (!x.checked) this.selectedArr.push(x.id);
                    });
                    this.isAll = true;
                }
                this.returnCheckedData();
                this.$emit('on-clear');
            },
            onLeftTableBodyFixedScroll() {
                // debounce(() => {
                this.$refs.leftTableBody.scrollTop = this.$refs.leftTableFixed.scrollTop;
                this.$emit('on-scroll', {
                    scrollTop: this.$refs.leftTableFixed.scrollTop
                });
                // }, 10);
            },
            onCheckRow({ id }) {
                this.$emit('on-check', id);
            },
            onMouseLeave() {
                this.hoverIdx = null;
                this.$emit('on-mouse', this.hoverIdx);
            },
            onMouseOver(index) {
                this.hoverIdx = index;
                this.$emit('on-mouse', this.hoverIdx);
            },
            onLeftTableBodyScroll() {
                // debounce(() => {
                this.$refs.leftTableHeader.scrollLeft = this.$refs.leftTableBody.scrollLeft;
                if (this.$refs.leftTableFixed) {
                    this.$refs.leftTableFixed.scrollTop = this.$refs.leftTableBody.scrollTop;
                }
                this.$emit('on-scroll', {
                    scrollTop: this.$refs.leftTableBody.scrollTop
                });
                // }, 10);
            }
        },
        watch: {
            scrollTop(newVal) {
                this.$refs.leftTableHeader.scrollTop = newVal;
                this.$refs.leftTableBody.scrollTop = newVal;
            },
            tableOption: {
                handler() {
                    this.selectedArr = [];
                    this.isAll = false;
                    this.tableHeader = this.tableOption.leftTableHeader.map(x => x);
                    this.hasFixed = this.tableHeader.some(x => x.fixed);
                },
                deep: true,
                immediate: true
            },
            hoverIndex(newVal) {
                this.hoverIdx = newVal;
            }
        }
    };
</script>
<style scoped lang="scss">
    @import "./left-right-table";
</style>
